<template>
	<!-- svip会员模块 -->
	<view class="vipBox">
		<view class="vipPaid pt-40">
			<!-- #ifdef MP -->
			<nav-bar navTitle="SVIP会员" :iconColor="iconColor" :isBackgroundColor="false" :backgroundColor="backgroundColor"></nav-bar>
			<!-- #endif -->
			<view class="headerBg" :style="{'background-image': `url(${urlDomain}crmebimage/presets/svipbg.png)`}">
			</view>
			<!-- 会员信息 -->
			<view class="card-section" :style="[svipInfo.isPaidMember?paidMemberSize:noMemberSize]">
				<view v-if="svipInfo.isPaidMember" class="avatar-wrap">
					<view class="acea-row mb-28">
						<image class="avatar" :src="svipInfo.avatar"></image>
						<view class="text">
							<view class="name line1">{{svipInfo.nickname}}</view>
							<view class="tips">{{svipInfo.phone}}</view>
						</view>
					</view>
					<view class="acea-row row-middle tips" @click="goToRecord">
						<view v-if="svipInfo.isPermanentPaidMember">永久SVIP会员</view>
						<view v-else>SVIP会员至{{svipInfo.paidMemberExpirationTime}}</view>
						<text class="f-s-20 iconfont icon-gengduo3 ml-8"></text>
					</view>
				</view>
			</view>
			<!-- 会员权益 -->
			<view class="benefits-section" :class="!svipInfo.isPaidMember?'bgColor':''">
				<view class="acea-row row-between mb-36" @click="goToBenefits(0)">
					<view class="title">会员尊享权益</view>
					<view class="acea-row row-middle">
						<view class="f-s-24 text mr10">权益介绍</view>
						<text class="text f-s-20 iconfont icon-gengduo3"></text>
					</view>
				</view>
				<view class="section-bd acea-row row-between-wrapper">
					<view v-for="(item,index) in svipInfo.benefitsList" :key="item.id" class="item"
						@click="goToBenefits(index)">
						<view class="image-wrap acea-row row-center row-middle">
							<view class="image-wrap-inner acea-row row-center-wrapper">
								<image class="image" :src="item.imageUrl"></image>
							</view>
						</view>
						<view class="text">
							<view class="name f-s-24 lh-34rpx">{{item.value}}</view>
							<view class="f-s-20 lh-28rpx">{{item.message}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="other-section pt-20">
				<!-- 会员卡 -->
				<view
					v-if="svipInfo && svipInfo.cardList && svipInfo.cardList.length>0 && !svipInfo.isPermanentPaidMember"
					class="type-section" id="card">
					<view class="type-section-inner">
						<view class="title acea-row row-between-wrapper">
							<view class="">开通SVIP</view>
						</view>
						<scroll-view class="scroll" scroll-x="true">
							<view v-for="item in svipInfo.cardList" :key="item.id" class="item"
								:class="{on: item.id === svip.id}" @click="checkType(item)">
								<view v-show="item.label" class="badge">{{item.label}}</view>
								<view class="name">{{item.name}}</view>
								<view class="new">￥<text class="num semiBold">{{item.price | moneyFormat}}</text></view>
								<view class="old">￥{{item.originalPrice | moneyFormat}}</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 推荐商品 -->
				<view v-if="recommendList.length">
					<view class="flex-center recommend-box mt-20">
						<image :src="`${urlDomain}crmebimage/presets/haowuzuo.png`"></image>
						<view class="f-s-32 lh-44rpx ml-4">会员专享好物</view>
						<image class="ml-6" :src="`${urlDomain}crmebimage/presets/haowuyou.png`"></image>
					</view>
					<recommend style="margin-top: -6rpx;" ref="recommendIndex" :isShowTitle="false" :isDefault="false"
						:recommendList="recommendList">
					</recommend>
				</view>
				<!-- 购买按钮 -->
				<view v-if="!svipInfo.isPermanentPaidMember" class="footer">
					<view class="protocol acea-row row-middle mb-20" :class="svip.giftBalance==0?'row-center':''">
						<view class="checkbox acea-row row-middle" @click="isAgree=!isAgree">
							<text v-if="!isAgree" class="iconfont icon-weixuanzhong"></text>
							<text v-else class="iconfont icon-xuanzhong1"></text>
						</view>
						<text class="f-s-24 text-999 ml-8">开通前请确认<text @click="userAgree"
								class="protocol_text f-s-24">《会员服务协议》</text></text>
					</view>
					<view v-show="svip.giftBalance!=0" class="isFirstChargeGive f-s-24"
						:style="{'background-image': `url(${urlDomain}crmebimage/presets/juxing.png)`}">
						{{svip.isFirstChargeGive?'首次开通':'现在购买'}}立送{{svip.giftBalance}}元余额
					</view>
					<view class="acea-row">
						<view class="text acea-row row-middle">
							<view><text class="symbol">¥ </text> <text class="number semiBold ml-4">
									{{ svip.price }}</text><text
									class="original regular">原价¥{{ parseFloat(svip.originalPrice) }}</text></view>
						</view>
						<view class="buy acea-row row-center-wrapper" @tap="subOrder">立即开通</view>
					</view>
				</view>
				<!-- <view v-show="!svipInfo.isPermanentPaidMember" class="footer-placeholder"></view> -->
			</view>
		</view>
		<!-- 评论 -->
		<uni-popup type="center" animation ref="activate" :mask-click="false">
			<view class="w-600 h-344 bg--w111-fff rd-14rpx acea-row row-column activate-box">
				<span class="iconfont icon-guanbi5 absolute" @click="onClose"></span>
				<view class="f-s-32 text--w111-333 lh-44rpx mb-24 text-center">确认开通</view>
				<view class="text--w111-666 mb-40">我已阅读并同意<text @click="userAgree"
						class="protocol_text f-s-24">《会员服务协议》</text>，确认开通该套餐。</view>
				<view class="btn" @click="sureOrder">继续开通</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import recommend from "@/components/base/recommend.vue";
	import navBar from '@/components/navBar';
	import orderPay from "@/mixins/OrderPay.js";
	import {
		Debounce
	} from '@/utils/validate.js'
	import {
		svipInfoApi,
		svipBenefitsListApi
	} from '@/api/activity.js';
	import {
		productMemberApi
	} from '@/api/product.js';
	import {
		goToAgreement
	} from "@/libs/order";
	export default {
		mixins: [orderPay],
		components: {
			// #ifdef MP
			navBar,
			// #endif
			recommend
		},
		computed: {
			paidMemberSize() {
				return {
					backgroundImage: `url(${this.$Cache.get("imgHost")}crmebimage/presets/huiyuanbj2.png)`,
					width: '710rpx',
					height: '642rpx',
					backgroundSize: '710rpx 642rpx',
					marginLeft: '20rpx'
				}
			},
			noMemberSize() {
				return {
					backgroundImage: `url(${this.$Cache.get("imgHost")}crmebimage/presets/huiyuanbj.png)`,
					width: '662rpx',
					height: '329rpx',
					backgroundSize: '662rpx 329rpx',
					marginLeft: '36rpx',
				}
			}
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				userInfo: {},
				// #ifdef MP
				iconColor: '#FFFFFF',
				isScrolling: false,
				// #endif
				benefitsList: [], //会员权益
				svipInfo: {}, //会员信息
				svip: {},
				goodScroll: false,
				params: { //精品推荐分页
					page: 1,
					limit: 10,
				},
				loading: false,
				recommendList: [],
				totalPrice: 0,
				isAgree: false,
				backgroundColor: ''
			}
		},
		onLoad() {
			this.getProductMember()
			this.getSvipInfo();
			this.getSvipBenefitsList();
		},
		onPageScroll(e) {
			uni.$emit('scroll');
			// #ifdef MP
			if (e.scrollTop > 50) {
				this.backgroundColor = '#fff';
				this.iconColor = '#333333'
			} else if (e.scrollTop < 50) {
				this.backgroundColor = '';
				this.iconColor = '#fff'
			}
			// #endif
		},
		methods: {
			//关闭弹窗
			onClose(){
				this.$refs.activate.close();
			},
			//记录跳转
			goToRecord() {
				uni.navigateTo({
					url: `/pages/activity/vip_order_record/index`
				});
			},
			//确认开通
			sureOrder() {
				this.isAgree = true;
				this.$refs.activate.close();
				this.handlerOpen();
			},
			//协议跳转
			userAgree() {
				goToAgreement('paid/member/agreement/info')
			},
			//权益跳转
			goToBenefits(currentIndex) {
				uni.navigateTo({
					url: `/pages/activity/vip_paid_benefits/index?currentIndex=${currentIndex}`
				});
			},
			//会员专享好物
			getProductMember() {
				uni.hideLoading();
				if (this.goodScroll) return;
				this.loading = true
				productMemberApi(
					this.params
				).then((res) => {
					this.$set(this.params, 'page', this.params.page + 1);
					this.goodScroll = this.params.page > res.data.totalPage;
					this.recommendList = this.recommendList.concat(res.data.list || []);
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			//会员信息
			getSvipInfo() {
				uni.hideLoading();
				svipInfoApi().then(res => {
					this.svipInfo = res.data;
					this.svip = this.svipInfo.cardList[0];
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},
			//会员权益
			getSvipBenefitsList() {
				uni.hideLoading();
				svipBenefitsListApi().then(res => {
					this.benefitsList = res.data;
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},
			//点击会员卡
			checkType(svip) {
				this.svip = svip;
			},
			//立即开通
			subOrder: Debounce(function(e) {
				if (!this.isAgree) return this.$refs.activate.open()
				this.handlerOpen();
			}),
			handlerOpen() {
				uni.showLoading({
					title: '正在提交中'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/goods/order_payment/index?orderNo=${this.svip.id}&payPrice=${this.svip.price}&fromType=svip`
					});
					uni.hideLoading();
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-guanbi5{
		top: 30rpx;
		right: 30rpx;
		color: #AAAAAA;
	}
	/deep/.list .texts {
		background-color: #fff;
		border-radius: 0 0 14rpx 14rpx;
	}

	.recommend-box {
		image {
			width: 42rpx;
			height: 36rpx;
		}

		view {
			font-weight: 600;
		}
	}

	.vipBox {
		padding-bottom: 172px;
	}

	.activate-box {
		padding: 40rpx;

		.btn {
			width: 520rpx;
			height: 72rpx;
			background: #E93323;
			border-radius: 43rpx 43rpx 43rpx 43rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}
	}

	/deep/uni-checkbox .uni-checkbox-wrapper {
		vertical-align: inherit !important;
	}

	.protocol_text {
		color: #D88D0E;
	}

	.isFirstChargeGive {
		height: 66rpx;
		line-height: 66rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 20rpx;
		top: 34rpx;
		z-index: 9;
		color: #fff;
		padding: 0 30rpx 0 20rpx;
	}
	.checkbox {
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;

		span {
			margin-left: 5rpx;
		}

		.icon-xuanzhong1 {
			color: #E93323;
			font-style: normal;
		}

		.iconfont {
			font-size: 36rpx;
		}
	}


	.vipPaid {
		background: linear-gradient(180deg, #141414 0%, #000000 100%);
        height: 900rpx;
	}

	.headerBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 820rpx;
		background-position: right top;
		background-repeat: no-repeat;
		background-size: 566rpx 334rpx;
	}

	.paidMemberSize {
		width: 710rpx;
		height: 642rpx;
		background-size: 710rpx 642rpx;
	}

	.noMemberSize {
		width: 662rpx;
		height: 329rpx;
		background-size: 662rpx 329rpx;
	}

	.card-section {
		position: absolute;
		border-bottom-right-radius: 48rpx;
		z-index: 9;
		background-position: 0% 0%;
		background-repeat: no-repeat;

		.vip-paid {
			position: absolute;
			top: 40rpx;
			right: 52rpx;
			width: 228rpx;
			height: 328rpx;
		}

		.expect {
			padding: 32rpx 0 58rpx 36rpx;

			.image {
				display: block;
				width: 414rpx;
				height: 76rpx;
			}

			.mark {
				display: inline-flex;
				align-items: center;
				height: 48rpx;
				padding: 0 24rpx;
				border-radius: 24rpx;
				margin-top: 12rpx;
				background: linear-gradient(-270deg, #E7B667 0%, #FFEAB5 100%);
				font-size: 28rpx;
				line-height: 48rpx;
				color: #7E4B06;

				.number {
					margin: 0 8rpx;
					font-size: 36rpx;
				}
			}
		}

		.avatar-wrap {
			min-height: 236rpx;
			padding: 62rpx 0 0 40rpx;

			.text {
				flex: 1;
				font-size: 22rpx;
				line-height: 30rpx;
				color: #89735B;

				.shopName {
					max-width: 164rpx;
				}

				.name {
					display: inline-block;
					vertical-align: middle;
					font-weight: 500;
					font-size: 32rpx;
					line-height: 44rpx;
					background: linear-gradient(-270deg, #FACB7A 0%, #FFF3D5 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.tips {
			margin-top: 6rpx;
			font-size: 22rpx;
			line-height: 30rpx;
			color: rgba(254, 227, 174, 0.8);
		}

		.info {
			margin-top: 74rpx;
			font-size: 24rpx;
			color: #AE5A2A;
		}

		.num {
			font-size: 36rpx;
		}

		.btn {
			width: 146rpx;
			height: 44rpx;
			border-radius: 22rpx;
			background-color: #FFFFFF;
			line-height: 44rpx;
			text-align: center;
		}
	}
    .bgColor{
		background-color: #1B1B1B;
	}
	.benefits-section {
		padding: 32rpx;
		width: 710rpx;
		height: 400rpx;
		border-radius: 24rpx;
		margin: 234rpx 20rpx 0 20rpx;
		position: relative;
		z-index: 97;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: rgba(250, 204, 125, 0.8);
			line-height: 44rpx;
		}

		.text {
			color: rgba(255, 255, 255, 0.6);
		}

		.section-hd {
			padding: 32rpx 32rpx 36rpx;
			font-weight: 500;
			font-size: 30rpx;
			line-height: 44rpx;
			color: rgba(250, 204, 125, 0.8);

			.arrow {
				font-weight: 400;
				font-size: 24rpx;
				line-height: 34rpx;
				color: rgba(255, 255, 255, 0.6);
			}

			.iconfont {
				font-size: 24rpx;
			}
		}

		.section-bd {
			padding: 0 0 32rpx;

			.item {
				flex: 1;
				min-width: 0;
			}

			.image-wrap {
				position: relative;
				border-radius: 50%;
				margin: 0 auto;
				width: 88rpx;
				height: 88rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 2%, rgba(255, 255, 255, 0) 100%);
				border: 1rpx solid;

				.image-wrap-inner {
					width: 42rpx;
					height: 37rpx;
				}
			}

			.image-inner {
				height: 100%;
				border-radius: 50%;
			}

			.image {
				width: 100%;
				height: 100%;
			}

			.text {
				margin-top: 28rpx;
				text-align: center;
				color: rgba(255, 255, 255, 0.4);
			}

			.name {
				margin-bottom: 8rpx;
				color: rgba(255, 255, 255, 0.7);
			}
		}
	}

	.other-section {
		position: relative;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;
		background-color: #F5F5F5;
		margin-top: -68rpx;
		z-index: 98;
	}

	.type-section {
		padding: 0 20rpx 22rpx 20rpx;

		.type-section-inner {
			border-radius: 24rpx;
			background-color: #FFFFFF;
			padding-bottom: 32rpx;
		}

		.title {
			padding: 32rpx 32rpx 26rpx;
			border-radius: 24rpx 24rpx 0 0;
			background: linear-gradient(180deg, #FFEFCE 0%, #FFFFFF 100%);
			font-weight: bold;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;

			.bold {
				display: inline-block;
				margin-right: 14rpx;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 45rpx;
				color: #333333;

				+view {
					display: inline-block;
				}
			}

			.time {
				margin-left: 14rpx;
				font-size: 24rpx;
				color: #AE5A2A;
			}

			.cash {
				font-weight: 400;
				font-size: 26rpx;
				line-height: 36rpx;
				color: rgba(217, 126, 29, 0.8);
			}
		}

		.scroll {
			white-space: nowrap;
		}

		.item {
			position: relative;
			display: inline-block;
			min-width: 220rpx;
			padding: 60rpx 6rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 24rpx;
			margin: 16rpx 24rpx 0 0;

			&:first-child {
				margin: 16rpx 24rpx 0 32rpx;
			}

			&:last-child {
				margin: 16rpx 32rpx 0 0;
			}

			&.on {
				border: 2rpx solid #D97E1D;
				background: linear-gradient(180deg, #FFFFFF 0%, #FEF5E6 100%);
			}

			.badge {
				position: absolute;
				top: 0;
				left: -2rpx;
				height: 44rpx;
				padding: 0 12rpx;
				border-radius: 22rpx 22rpx 22rpx 0;
				margin-top: -18rpx;
				background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
				font-size: 24rpx;
				line-height: 44rpx;
				color: #FFFFFF;
			}

			.name {
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #7E4B06;
			}

			.button {
				width: 142rpx;
				height: 52rpx;
				border-radius: 22rpx;
				margin: 18rpx auto 0;
				background-color: #FEE8BC;
				text-align: center;
				font-size: 22rpx;
				line-height: 52rpx;
				color: #333333;
			}
		}

		.new {
			margin-top: 28rpx;
			text-align: center;
			font-family: SemiBold;
			font-size: 36rpx;
			line-height: 62rpx;
			color: #333333;

			.num {
				font-size: 52rpx;
			}
		}

		.old {
			margin-top: 8rpx;
			text-decoration: line-through;
			text-align: center;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #999999;
		}

		.info {
			margin-top: 4rpx;
			text-align: center;
			font-size: 24rpx;
			line-height: 34rpx;
			color: #999999;
		}

		.agree {
			font-size: 22rpx;
			text-align: center;
			color: #797979;

			.link {
				display: inline-block;
			}

			.mark {
				color: #AE5A2A;
			}
		}
	}

	.footer-placeholder {
		height: 152rpx;
		height: calc(152rpx + constant(safe-area-inset-bottom));
		height: calc(152rpx + env(safe-area-inset-bottom));
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 22rpx 20rpx;
		padding-bottom: calc(22rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;

		.text {
			flex: 1;
			height: 108rpx;
			padding-left: 48rpx;
			border-radius: 54rpx 0 0 54rpx;
			background-color: #222222;
			font-size: 28rpx;
			color: #FACC7D;
		}

		.symbol {
			font-weight: 600;
			font-size: 32rpx;
		}

		.number {
			font-size: 48rpx;
		}

		.original {
			margin-left: 16rpx;
			text-decoration: line-through;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.4);
		}

		.buy {
			position: relative;
			width: 266rpx;
			height: 108rpx;
			border-radius: 0 54rpx 54rpx 0;
			background: linear-gradient(to right, #FFDD9C, #EEA82F);
			font-weight: 500;
			font-size: 32rpx;
			color: #7E4B06;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				border-width: 54rpx 20rpx;
				border-style: solid;
				border-color: #222222 transparent transparent #222222;
			}
		}
	}

	.coupon-section {
		border-radius: 24rpx;
		margin: 0 20rpx;
		background-color: #FFFFFF;

		.section-hd {
			padding: 32rpx 32rpx 24rpx;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 44rpx;
			color: #333333;

			.link {
				font-weight: 400;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #666666;

				.iconfont {
					font-size: 24rpx;
				}
			}
		}

		.section-bd {
			padding-bottom: 24rpx;
			white-space: nowrap;

			.item {
				position: relative;
				display: inline-block;
				width: 151rpx;
				padding: 0 6rpx;
				border-radius: 24rpx;
				margin: 20rpx 14rpx 0 0;
				background-color: #E0A558;

				&:first-child {
					margin-left: 32rpx;
				}

				.inner {
					padding-bottom: 76rpx;
					border: 2rpx solid #FFEDCA;
					border-radius: 12rpx;
					margin-top: -20rpx;
					background-color: #FFFFFF;

					.type {
						width: 96rpx;
						height: 38rpx;
						border-radius: 0 0 12rpx 12rpx;
						background-color: rgba(224, 165, 88, 0.2);
						margin: 0 auto;
						text-align: center;
						font-size: 20rpx;
						line-height: 38rpx;
						color: #333333;
					}
				}

				&.gray {
					background-image: url("");

					.btn {
						color: #9F9F9F;
					}

					.money {
						color: #fff;

						.num {
							color: #fff;
						}
					}

					.name {
						color: #fff;
					}

					.text {
						color: #9F9F9F;
					}

					.mark {
						color: #A8A8A8;
					}
				}

				.btn {
					width: 52rpx;
					padding-right: 14rpx;
					padding-left: 14rpx;
					white-space: pre-wrap;
					font-size: 24rpx;
					color: #5D3324;
				}

				.text {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 76rpx;
					padding-top: 30rpx;
					background-image: url("");
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}

				.name {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #5D3324;
				}

				.mark {
					text-align: center;
					font-weight: 500;
					font-size: 22rpx;
					line-height: 30rpx;
					color: rgba(250, 204, 125, 0.8);
				}

				.money {
					margin-top: 16rpx;
					text-align: center;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 44rpx;
					color: #E0A558;
				}

				.num {
					font-family: SemiBold;
					font-size: 44rpx;
				}
			}
		}
	}

	.recommend /deep/ .fw-500 {
		font-weight: bold;
	}
</style>